<template>
  <div>
    <template v-for="(item, index) in dataForm[attrName]">
      <div :key="index" style="display: flex;position: relative; margin-top: 5px;">
        <el-select v-model="item[listName]" filterable clearable :placeholder="listPlaceholder" @input="forceUpdate"
                   style="margin-right: 5px;">
          <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-input  v-model="item[numberName]" :placeholder="numberPlaceholder"

                         @input="forceUpdate"></el-input>
        <el-tooltip class="item" effect="dark" content="新增"
                    placement="bottom">
          <a class="el-icon-circle-plus-outline" @click="addOneLine(index+1)"
             style="position: absolute;right: -17px; top: 10px;"></a>
        </el-tooltip>
        <el-tooltip v-if="dataForm[attrName].length > 1" class="item" effect="dark" content="删除" placement="bottom">
          <a class="el-icon-remove-outline" @click="deleteOneLine(index)"
             style="position: absolute;right: -35px; top: 10px;"></a>
        </el-tooltip>
      </div>
    </template>
  </div>
</template>

<script>
import basicMixins from './basicMixins'

export default {
  name: 'normalListAndNumber',
  mixins: [basicMixins],
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      required: true,
      default: () => []
    },
    otherAttrs: {
      type: Array,
      default: () => []
    },
    listPlaceholder: {
      type: String,
      default: ''
    },
    listName: {
      type: String,
      default: 'key'
    },
    numberName: {
      type: String,
      default: 'value'
    },
    numberPlaceholder: {
      type: String,
      default: ''
    }
  },
  methods: {
    addOneLine(index) {
      const item = {}

      item[this.listName] = ''
      item[this.numberName] = ''

      this.otherAttrs.forEach(attr => {
        item[attr] = ''
      })
      this.dataForm[this.attrName].splice(index, 0, item)
    },
    deleteOneLine(index) {
      this.dataForm[this.attrName].splice(index, 1)
    }
  },
  created() {
    this.dataForm[this.attrName] = []
    this.addOneLine(0)
  }
}
</script>

<style scoped>
</style>
